{% extends "web_user/layout.html" %}

{% block content %}

    <div class="container" >
        <div style="margin-bottom: 10px">
            <!--两种方式触发对话框 -->
            <input type="button" value="新建订单1" class="btn btn-success" data-toggle="modal" data-target="#myModal"> <!-- 通过data-toggle和data-target样式-->

            <input id="btnAdd" type="button" value="新建订单2" class="btn btn-success"> <!-- 通过绑定点击事情-->

        </div>

    <div class="panel panel-default">
      <!-- Default panel contents -->
      <div class="panel-heading">
          <span class="glyphicon glyphicon-th-list" aria-hidden="true"></span>
          订单列表
      </div>

  <!-- Table -->
      <table class="table table-bordered">
        <thead>
          <tr>
            <th>ID</th>
            <th>订单号</th>
            <th>名称</th>
            <th>价格</th>
            <th>状态</th>
            <th>管理员</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
        {% for obj in queryset %}
          <tr uid="{{ obj.id }}">
            <th>{{ obj.id }}</th>
            <td>{{ obj.oid }}</td>
            <td>{{ obj.title }}</td>
            <td>{{ obj.price }}</td>
            <td>{{ obj.get_status_display }}</td>
            <td>{{ obj.admin.username }}</td>
            <td>
                <input uid="{{ obj.id }}" type="button" class="btn btn-primary btn-xs btn-edit" value="编辑">
                <input uid="{{ obj.id }}" type="button" class="btn btn-danger btn-xs btn-delete" value="删除">
            </td>
          </tr>
         {% endfor %}
        </tbody>
      </table>
    </div>

        <ul class="pagination">
            {{ page_string }}
        </ul>


    </div>




    <!--新建/编辑 订单对话框 -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">新建</h4>
                </div>
                <div class="modal-body">
                    <form id="formAdd" novalidate> <!-- novalidate去规避浏览器做的校验-->
                        <div class="clearfix">
                            {% for field in form %}
                                <div class="col-xs-6">
                                    <div class="form-group" style="position: relative;margin-bottom: 20px">
                                        <label>{{ field.label }}</label>
                                        <!-- field.label会去取到models.py定义类的属性中的verbose_name-->
                                        {{ field }}
                                        <span class="error-msg" style="color: red;position: absolute"></span>
                                        <!--<input type="text" class="form-control" placeholder="姓名" name="user"> -->
                                    </div>
                                </div>
                            {% endfor %}
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button id="btnSave" type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!--删除对话框 -->
    <div class="modal fade" id="DeleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="alert alert-danger alert-dismissible fade in" role="alert">
                <h4>是否确定删除?</h4>
                <p style="margin: 10px 0;">如果删除，所有相关的数据都会被删除！！！</p>
                <p style="text-align: right">
                    <button type="button" id="btnConfirmDelete" class="btn btn-danger">确 定</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                </p>
            </div>
        </div>
    </div>


{% endblock %}

{% block js %}
    <script type="text/javascript">
    // 全局变量DELETE_ID
    var DELETE_ID;
    var EDIT_ID;

    $(function () {
        bindBtnAddEvent();
        bindBtnSaveEvent();
        bindBtnDeleteEvent();
        bindBtnConfirmDeleteEvent();
        bindBtnEditEvent();
    })
    function bindBtnAddEvent() {
        $("#btnAdd").click(function () {
            // 清空对话框中的数据
            $("#formAdd")[0].reset();

            // 清空对话框的错误信息
            $(".error-msg").empty();

            // 将EDIT_ID设置为0，以便点击保存按钮时区分是编辑还是保存
            EDIT_ID = 0;

            // 绑定点击事件触发对话框
            $("#myModal").modal("show"); // 打开对话框

             // 将对话框的标题修改为新建
            $("#myModalLabel").text("新建");
        });
    }

    function bindBtnSaveEvent() {
        $("#btnSave").click(function () {

            // 点击时清空错误信息
            $(".error-msg").empty();

            // 根据EDIT_ID的值决定发送ajax是编辑还是新建
            if (EDIT_ID){
                doEdit();
            }else {
                doAdd();
            }
        });

    }

    function doAdd() {
        // 发送新建订单的ajax请求
        $.ajax({
                url: "/order/add/",
                type: "post",
                data: $("#formAdd").serialize(),
                dataType: "JSON",
                success: function (res) {
                    if (res.status){
                        // console.log(res);
                        alert("创建成功");

                        // 清空form表单中已经输入的内容
                        // $("#formAdd")是JQery对象 -> $("#formAdd")[0] DOM对象
                        $("#formAdd")[0].reset();

                        // 创建成功后关闭对话框
                        $('#myModal').modal('hide');

                        // 创建成功后刷新页面，展示出新增的数据
                        location.reload();
                    }else{
                        // 把错误信息显示到对话框中
                        $.each(res.error, function (name,errorList) {
                            $("#id_"+name).next().text(errorList[0]);
                        })
                    }
                }
            })
    }

    function doEdit() {
        // 发送编辑订单的ajax请求
        $.ajax({
                url: "/order/edit/"+ "?uid=" + EDIT_ID,  // -> /order/edit/?uid=12
                type: "post",
                data: $("#formAdd").serialize(),
                dataType: "JSON",
                success: function (res) {
                    if (res.status){
                        // console.log(res);

                        // 清空form表单中已经输入的内容
                        // $("#formAdd")是JQery对象 -> $("#formAdd")[0] DOM对象
                        $("#formAdd")[0].reset();

                        // 创建成功后关闭对话框
                        $('#myModal').modal('hide');

                        // 创建成功后刷新页面，展示出新增的数据
                        location.reload();
                    }else{
                        if (res.tips){
                            alert(res.tips);
                        }else{
                            // 把错误信息显示到对话框中
                            console.log(res.error)
                            $.each(res.error, function (name,errorList) {
                                $("#id_"+name).next().text(errorList[0]);
                            })
                        }
                    }
                }
            })
    }

    function bindBtnDeleteEvent() {
        $(".btn-delete").click(function () {
            // alert("点击了删除");
            // 显示删除对话框
            $("#DeleteModal").modal("show");

            //获取当前行的id并且赋值给全局变量
            DELETE_ID = $(this).attr("uid");
            // console.log(DELETE_ID);
        });
    }

    function bindBtnConfirmDeleteEvent() {

        $("#btnConfirmDelete").click(function () {
            // 点击确认删除按钮，将全局变量中设置的那个需要删除的id发送到后台
            $.ajax({
                url: "/order/delete/",  // /order/delete/?uid=123
                type: "get",
                data:{
                 uid: DELETE_ID
                },
                dataType: "JSON",
                success: function (res) {
                    if (res.status){
                        // alert("删除成功");

                        // 隐藏删除对话框
                        $("#DeleteModal").modal("hide");

                        // 在页面上删除当前行的数据(js方式)
                        // $("tr[uid='"+ DELETE_ID +"']").remove();

                        // 要删除的ID变为零
                        // DELETE_ID = 0;

                        // 简单方式：刷新页面
                        location.reload();
                    } else {
                        // 删除失败
                        alert(res.error);

                    }
                }

            })
        });

    }

    function bindBtnEditEvent() {
        $(".btn-edit").click(function () {
            // 清空对话框中的数据
            $("#formAdd")[0].reset();

            // 清空对话框的错误信息
            $(".error-msg").empty();

            // 获取这一行的数据，在编辑器对话框中展示出来
            // 点击编辑按钮时，需要发送ajax请求
            var uid = $(this).attr("uid");
            EDIT_ID = uid; // 将当前行的id赋值给全局变量EDIT_ID

            $.ajax({
                url: "/order/detail/",
                type: "get",
                dataType: "JSON",
                data:{
                    uid: uid,
                },
                success: function (res) {
                    if (res.status){

                        // 将这一行的数据在编辑页面对话框中展示出来
                        $.each(res.data,function (name,value) {
                            $("#id_"+name).val(value)
                        })

                        // 点击编辑器按钮显示对话框
                        $("#myModal").modal("show");

                        // 将对话框的标题修改为编辑
                        $("#myModalLabel").text("编辑");


                    }else {
                        alert(res.error);
                    }

                }

            })

        });
    }




    </script>

{% endblock %}